$(function() {
    // 登录
    var loginArr = JSON.parse($.cookie("logoInfo") || '[]');
    if (loginArr.length == 0) {
        $(".login").html(`
     <span><a href="./register.html">注册</a></span>
     <span><a href="./login.html">登录</a></span>
     <span class="bor">
         <a class="qqq" href="javascript:void(0)">
             <img src="./images/index/cart.png" alt="">
         </a>
     </span>`)
    } else {
        $(".login").html(`
     <span>你好,${JSON.parse($.cookie('logoInfo'))[0].utel}<a href="javascript:void(0)" class="off">[退出]</a></span>
     <span class="bor">
         <a href="./cart.html">
             <img src="./images/index/cart.png" alt="">
         </a>
     </span>`)
    }

    // //登录
    // if ($.cookie("logoInfo") == null || JSON.parse($.cookie("logoInfo")) == null) {
    //     $(".login").html(`
    //     <span><a href="./register.html">注册</a></span>
    //     <span><a href="./login.html">登录</a></span>
    //     <span class="bor">
    //         <a class="qqq" href="javascript:void(0)">
    //             <img src="./images/index/cart.png" alt="">
    //         </a>
    //     </span>`)
    // } else {
    //     $(".login").html(`
    //     <span>你好,${JSON.parse($.cookie('logoInfo'))[0].utel}<a href="javascript:void(0)" class="off">[退出]</a></span>
    //     <span class="bor">
    //         <a href="./cart.html">
    //             <img src="./images/index/cart.png" alt="">
    //         </a>
    //     </span>`)
    // }

    //退出登录
    $(".login").on("click", ".off", function() {
        $.ajax({
            url: "./api/quit",
            type: "get"
        }).then(function(res) {
            layer.msg(res.msg)
                // $.cookie("logoInfo", null);
            $(window).attr('location', './login.html');
        })
    })

    $(".login").on("click", ".qqq", function() {
        layer.msg('您还没有登录,请登录后在操作', {
            icon: 2,
            offset: 't',
            anim: 6
        });

        setTimeout(function() {
            $(window).attr('location', './login.html');
        }, 2000)
    })


    var id = window.location.href.split("?")[1].split("=")[1];
    $.ajax({
        url: `./api/ById/${id}`,
        type: "get"
    }).then(function(res) {
        var { data } = res;
        var strHtml = `
        <div class="product-layout">
            <div class="el-breadcrumb">
                <span class="el-breadcrumb__item">
                    <span class="el-breadcrumb__inner is-link">走秀首页</span>
                <span class="el-breadcrumb__separator">&gt;</span>
                </span>

                <span class="el-breadcrumb__item">
                    <span class="el-breadcrumb__inner is-link">女装</span>
                <span class="el-breadcrumb__separator">&gt;</span>
                </span>
                <span class="el-breadcrumb__item">
                    <span class="el-breadcrumb__inner">${data.name}</span>
                </span>
            </div>

            <div class="product-header">
                <div class="clearfix">
                    <div id="box">
                        <div id="middleImg">
                            <img src="${data.middleImg[0]}" />
                            <div id="middleArea"></div>
                        </div>
                        <div id="bigArea">
                            <img id="bigImg" src="${data.bigImg[0]}" />
                        </div>

                        <div id="small">
                            <ul>
                                <li class="first">
                                    <img src="${data.middleImg[0]}" />
                                </li>
                                <li>
                                    <img src="${data.middleImg[1]}" />
                                </li>
                                <li>
                                    <img src="${data.middleImg[2]}" />
                                </li>
                                <li>
                                    <img src="${data.middleImg[3]}" />
                                </li>
                            </ul>
                        </div>
                    </div>


                    <div class="product-info fr">
                        <div class="product-name">${data.name}</div>
                        <div class="brand-name">
                            <span>品牌：${data.point}</span>
                            <div class="product-no fr">商品编号：${data.productno}</div>
                        </div>
                        <div class="product-price">
                            <span class="unit">
                                <span class="price-unit">¥</span>
                                <span class="unit1">${data.price}</span>
                            </span>

                            <span class="market-price">&nbsp;&nbsp; <span class="price-unit">¥</span>${data.oldprice}
                            </span>
                        </div>

                        <div class="product-region">发货地:
                            <span class="region">${data.address} </span>
                            <span class="region">${data.time}</span>
                        </div>

                        <div class="product-tariff">
                            税&nbsp;&nbsp;费:
                            <span class="region">${data.tariff}</span>
                        </div>

                        <div class="condition-layout color-wrap">
                            <div class="condition-title">颜色:</div>
                            <ul class="condition-list">
                                <li class="condition active color">${data.color}
                                    <span class="bbb"></span>
                                </li>
                            </ul>
                        </div>

                        <div class="condition-layout size-wrap">
                            <div class="condition-title">尺码:</div>
                            <ul class="condition-list size">`;
        data.size.forEach(el => {
            strHtml += `
                                    <li class="condition">
                                        ${el}
                                        <span></span>
                                    </li>`
        });
        strHtml += `</ul>
                        </div>

                        <div class="condition-layout number-wrap">
                            <div class="condition-title">购买数量:</div>
                            <div class="el-input-number">
                                <span class="el-input-number__decrease less">—</span>

                                <span class="el-input-number__increase plus">＋</span>

                                <div class="el-input">
                                    <input type="text" class="el-input__inner" value="${data.sum}">
                                </div>
                            </div>
                        </div>

                        <div class="product-service">
                            <img src="./images/detail/shopping.png" alt="">由提供
                            <img class="xiu-ren" src="./images/detail/contact.png" alt="">由走秀网提供售后服务
                        </div>

                        <div class="button-wrap">
                            <button class="el-button btn-buy el-button--primary">
                                <span>立即购买</span>
                            </button>
                            <button class="el-button btn-add-cart el-button--primary">
                                <span>加入购物车</span>
                            </button>
                        </div>

                        <a href="" class="phone">电话订购: 400-888-4499
                            <span>(9:00~19:00)</span>
                        </a>

                        <div class="label-list">
                            <div class="label">
                                <img src="./images/detail/zheng.png"> 正品保障
                            </div>
                            <div class="label">
                                <img src="./images/detail/jian.png"> 权威质检
                            </div>
                            <div class="label">
                                <img src="./images/detail/like.png"> 收藏商品
                            </div>
                            <div class="label">
                                <img src="./images/detail/like.png"> 收藏品牌
                            </div>
                        </div>
                    </div>
                </div>


                <div class="product-footer-detail-wrap">
                    <div class="product-detail">
                        <ul class="tab-list">
                            <li class="tab active1">商品详情
                                <div class="bbb"></div>
                            </li>
                            <li class="tab">商品评价</li>
                        </ul>

                        <div class="detail-wrap">
                            <ul class="content-wrap">
                                <li class="detail">
                                    <div class="detail-title">
                                        商品参数
                                    </div>
                                    <ul class="specification-list">
                                        <li class="specification"><span>领型:</span> 翻领
                                        </li>
                                        <li class="specification"><span>衣门襟:</span> 单排扣
                                        </li>
                                        <li class="specification"><span>衣长:</span> 标准
                                        </li>
                                        <li class="specification"><span>服装风格:</span> 休闲
                                        </li>
                                    </ul>
                                    <ul class="specification-list">
                                        <li class="specification"><span>服装流行元素:</span> 烫钻
                                        </li>
                                        <li class="specification"><span>服装厚薄:</span> 普通
                                        </li>
                                        <li class="specification"><span>服装版型:</span> 常规型
                                        </li>
                                        <li class="specification"><span>袖长:</span> 长袖
                                        </li>
                                    </ul>
                                    <ul class="specification-list">
                                        <li class="specification"><span>袖型:</span> 常规袖
                                        </li>
                                        <li class="specification"><span>材质（主面料）:</span> 尼龙
                                        </li>
                                        <li class="specification"><span>里料材质:</span> 100% 聚酯纤维
                                        </li>
                                        <li class="specification"><span>规范颜色:</span> 黑色
                                        </li>
                                    </ul>
                                    <div class="tip">
                                        <div class="title">
                                            消费者购前须知：
                                        </div>
                                        尊敬的顾客，您在走秀网购买的境外发货商品，等同于您在境外购买，请在购买前仔细阅读全部内容，并对自身风险承担作出客观判断。
                                        <br>1.因为您所购买的是海外商品，可能会存在无简体中文标签情况；
                                        <br>2.海外商品适用的关于品质、安全、健康、卫生、环保、标识等标准与我国大陆相关标准可能有所不同，在使用过程中由此可能产生的危害、损失或其他风险，走秀网不承担责任。
                                        <br>3.海外购买商品仅限个人自用，不得再次销售。
                                        <br>4.海外商家不定期更换包装，走秀网尽力准确展示商品最新包装，如有不符，以收到实物为主。
                                        <br>5.所有的商品图片均为专业摄影师拍摄，经后期修制与色彩调整，尽量与实际商品保持一致，但由于灯光、显示器色彩偏差，个人对颜色理解不同等因素，实物与图片出现一定程度色差实属难免，商品颜色请以实际商品为准 ，此类问题不属于商品质量问题。
                                        <br>6.在您收到货时有任何问题请第一时间联系客服解决。
                                    </div>

                                    <div class="detail-img">
                                        <img src="${data.cm}">
                                        <img src="${data.bigImg[0]}">
                                        <img src="${data.bigImg[2]}">
                                        <img src="${data.bigImg[3]}">
                                    </div>

                                    <div class="tip">
                                        <div class="license">
                                            <div class="license-name">
                                                经营者资质
                                            </div>
                                            <div class="sub-list">
                                                <ul>
                                                    <li>
                                                        <div>证照信息:</div>
                                                        <div>
                                                            <a href="">
                                                                <img src="./images/detail/zizhi.gif">
                                                            </a>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tip">
                                        <div class="title">发票说明:</div>
                                        1. 若您购买的是【国内发货】商品，商家有义务按照买家实际支付现金，开具正规发票，相关税收应按国家相关规定由商家自行承担。
                                        <br>2. 若您购买的是【海外直邮】、【海外发货】或【国内保税仓发货】商品，商家均为海外商家，暂时无法按照国内法律规定提供购物发票。
                                    </div>
                                    <div class="tip">
                                        <div class="title">价格说明:</div>
                                        走秀价：指商家在走秀网开放平台销售商品时的售价。
                                        <br>限时抢购价、特卖价：指商家在促销活动中的售价。
                                        <br>划线价：商品的参考价,并非原价,该价格可能是品牌专柜价、商品吊牌价或由品牌供应商提供的零售价或商品在走秀网平台曾经展示的走秀价。
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>`;
        $(".layout-main").html(strHtml);
    })

    //首页列表栏切换
    $(".top li").eq(0).on("click", function() {
        $(window).attr('location', './index.html');
    }).siblings().on("click", function() {
        $(window).attr('location', './list.html');
    })

    //固定导航栏
    $(document).on("scroll", function() {
        if ($(document).scrollTop() > $(".head").height()) {
            $(".top").css({
                position: "fixed",
                top: 0,
                left: 0,
                zIndex: 9999
            })
            $(".category-list-wrap").css("margin-top", $(".top").height())
        } else {
            $(".top").css({
                position: "static",
            })
            $(".category-list-wrap").css("margin-top", 0)
        }
    })

    //返回顶部
    $(document).on("scroll", function() {
        if ($(document).scrollTop() > 900) {
            $(".toTop").css("display", "block");
        } else {
            $(".toTop").css("display", "none");
        }
    })
    $(".toTop").on("click", function() {
        $('html,body').animate({ scrollTop: 0 }, 500);
    })


    //放大镜
    $(".layout-main").on("mouseenter", "#small li", function() {
        $(this).css("border", "1px solid #000").siblings().css("border", "1px solid transparent");

        $("#middleImg").children(0).attr("src", `./images/detail/id${id}/${$(this).index()+1}.webp`);
        $("#bigArea").children(0).attr("src", `./images/detail/id${id}/fang${$(this).index()+1}.webp`);
    })

    //鼠标进入
    $(".layout-main").on("mouseenter", "#middleImg", function() {
            $("#middleArea").css("display", "block");
            $("#bigArea").css("display", "block");

            //小区域=(小图/大图)*大区域
            $("#middleArea").css({
                    "width": (parseInt($("#middleImg").width()) / parseInt($("#bigImg").width())) * parseInt($("#bigArea").width()),
                    "height": (parseInt($("#middleImg").height()) / parseInt($("#bigImg").height())) * parseInt($("#bigArea").height())
                })
                //鼠标移动
            $("#middleImg").on("mousemove", function(e) {
                var mX = e.pageX - $("#middleArea").width() / 2 - $("#middleImg").offset().left
                var mY = e.pageY - $("#middleArea").height() / 2 - $("#middleImg").offset().top

                if (mX <= 0) {
                    mX = 0;
                }
                if (mY <= 0) {
                    mY = 0;
                }
                if (mX > $("#middleImg").width() - $("#middleArea").width()) {
                    mX = $("#middleImg").width() - $("#middleArea").width()
                }
                if (mY > $("#middleImg").height() - $("#middleArea").height()) {
                    mY = $("#middleImg").height() - $("#middleArea").height()
                }

                //大区域比小区域
                var $scale = $("#bigArea").width() / $("#middleArea").width();

                $("#middleArea").css({
                    left: mX,
                    top: mY
                })
                $("#bigImg").css({
                    left: -$scale * mX,
                    top: -$scale * mY
                })

            }).on("mouseleave", function() {
                $("#middleArea").css("display", "none");
                $("#bigArea").css("display", "none");
            })

        }) //放大镜end

    //尺码切换
    $(".layout-main").on("click", ".condition-list li", function() {
        $(this).addClass("active").siblings().removeClass("active");
        $(this).children("span").addClass("bbb").parent().siblings().children("span").removeClass("bbb")
    })

    //购买数量
    $(".layout-main").on("click", ".less", function() {
        if ($(".el-input__inner").prop("value") != 1) {
            $(".el-input__inner").prop("value", $(".el-input__inner").prop("value") - 1)
        }
    })

    //加
    $(".layout-main").on("click", ".plus", function() {
        $(".el-input__inner").prop("value", $(".el-input__inner").prop("value") * 1 + 1)
    })


    //飞入购物车
    $(".layout-main").on("click", ".btn-add-cart", function() {
        //判断是否选择尺码
        if ($(".size").find(".active").length <= 0) {
            layer.msg("请选择尺码", {
                icon: 5
            })
            return
        }

        if ($.cookie("logoInfo") == null || JSON.parse($.cookie("logoInfo")) == null) {
            layer.msg('您还没有登录,请登录后在操作', {
                icon: 2,
                offset: 't',
                anim: 6
            });

            setTimeout(function() {
                $(window).attr('location', './login.html');
            }, 2000)
            return
        }

        var obj = {
            pid: id, //产品id
            pimg: $(".first").children("img").prop("src").split("8080")[1], //图片
            pname: $(".product-name").text().trim(), //名称
            pcolor: $(".color").text().trim(), //颜色
            psize: $(".size").find(".active").text().trim(), //尺码
            pprice: $(".unit1").text().trim(), //单价
            pnum: $(".el-input__inner").prop("value").trim(), //数量
            ptotal: Number($(".unit1").text().trim() * $(".el-input__inner").prop("value").trim()),
            uid: JSON.parse($.cookie("logoInfo"))[0].uid //购买人
        }

        $.ajax({
            url: "./api/addCart",
            type: "post",
            data: obj
        }).then(function(res) {
            layer.msg(res.msg, {
                icon: res.status == 1 ? 6 : 5
            })
        })

        //克隆图片
        var cloneImg = $(".first").children("img").clone();
        cloneImg.css({
            width: 80,
            // display: none,
            position: "absolute"
        })
        $(this).append(cloneImg);

        var $borOffset = $(".head .login .bor").offset();
        $borOffset.top += $(".head .login .bor").height() - 230;
        $borOffset.left += $(".head .login .bor").width() - 360;
        $borOffset.height = 0;
        $borOffset.width = 0

        cloneImg.animate($borOffset, 1000, function() {
            cloneImg.remove();
        })
    })
})